<template>
  <div class="chatgroup">
    <audio src="http://h5.oeeee.com/h5/cppcc/video/audiomsg.mp3" id="msgmusic"></audio>

    <div class="chatgroup_area">

      <div v-show="showon >= 0" class="item time" data-delay="500"><span>{{ times }}</span></div>

      <div v-show="showon >= 1" class="item tips" data-delay="1500">
          “南都机器人小南”邀请你和“全国人大代表、河北省委书记赵克志、全国政协委员、北京市政协主席吉林、全国人大代表、广东省政协主席王荣、全国政协常委、海峡两岸关系协会会长陈德铭、全国人大新闻发言人傅莹、全国政协新闻发言人王国庆、全国政协委员、中国驻日本大使程永华、全国政协委员、中国驻德国大使史明德、全国政协常委、副秘书长，民进中央副主席朱永新、全国政协委员、外交部原副部长、国家反恐安全专员程国平、全国政协外事委员会委员、中联部原副部长于洪君、全国政协委员、国务院扶贫开发领导小组专家咨询委员会主任范小建、全国政协委员、中国（海南）改革发展研究院院长迟福林、全国政协委员、财政部财政科学研究所原所长贾康、南都记者商西、南都记者娜迪娅、南都记者吴斌”等加入了群聊
      </div>

      <div v-show="showon >= 2" class="item chat" data-delay="2000">
        <img src="~assets/home/head_shangxi.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者商西</div>
          <div class="cont">@南都记者吴斌 好棒好棒，抢到全国政协新闻发言人王国庆的提问<img src="~assets/home/good.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 3" class="item chat" data-delay="2000">
        <img src="~assets/home/head_wubin.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者吴斌</div>
          <div class="cont">楼上的，你就装，继续装！你不也抢问到全国人大新闻发言人傅莹的提问吗<img src="~assets/home/jizhi.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 4" class="item chat mychat" data-delay="1500">
        <img v-bind:src="user.head" class="head"/>
        <div class="area">
          <div class="name">{{ user.name }}</div>
          <div><img src="~assets/home/mengbigif.jpg"/></div>
        </div>
      </div>

      <div v-show="showon >= 5" class="item chat" data-delay="2000">
        <img src="~assets/home/head_nadiya.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者娜迪娅</div>
          <div class="cont">@{{ user.name }} 你不知道吗？他俩可火了，甩个小视频给你</div>
        </div>
      </div>

      <div v-show="showon >= 6" class="item chat" data-delay="2000">
        <img src="~assets/home/head_nadiya.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者娜迪娅</div>
          <div class="video">
            <!-- 小视频 -->
            <a href="javascript:void(0);" class="pausebtn" v-on:click="pausevideo">|&nbsp;|</a>
            <video webkit-playsinline playsinline src="http://h5.oeeee.com/h5/cppcc/video/chatvideo1.mp4"></video>
            <a href="javascript:void(0);" class="playbtn" v-on:click="playvideo"><img src="~assets/home/vimg001.jpg"/></a>
            <i class="handTips-red"></i>
          </div>
        </div>
      </div>

      <div v-show="showon >= 7" class="item chat" data-delay="1000">
        <img src="~assets/home/head_fengqunxing.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者冯群星</div>
          <div class="cont">斌爷威武！</div>
        </div>
      </div>

      <div v-show="showon >= 8" class="item chat" data-delay="1000">
        <img src="~assets/home/head_jianglin.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者蒋琳</div>
          <div class="cont">斌爷威武！</div>
        </div>
      </div>

      <div v-show="showon >= 9" class="item chat" data-delay="1000">
        <img src="~assets/home/head_tangzizi.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者唐孜孜</div>
          <div class="cont">斌爷威武！</div>
        </div>
      </div>

      <div v-show="showon >= 10" class="item chat" data-delay="2000">
        <img src="~assets/home/head_liangxiaochan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者梁小婵</div>
          <div class="cont">6666666，全国两会首场新闻发布会，南都是唯一提问的地方媒体！</div>
        </div>
      </div>

      <div v-show="showon >= 11" class="item chat" data-delay="2000">
        <img src="~assets/home/head_pengbin.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者彭彬</div>
          <div class="cont">楼上的，请保持队形！</div>
        </div>
      </div>

      <div v-show="showon >= 12" class="item chat" data-delay="1500">
        <img src="~assets/home/head_wubin.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者吴斌</div>
          <div class="cont"><img src="~assets/home/han.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 13" class="item chat" data-delay="2000">
        <img src="~assets/home/head_nadiya.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者娜迪娅</div>
          <div class="video">
            <!-- 小视频 -->
            <a href="javascript:void(0);" class="pausebtn" v-on:click="pausevideo">|&nbsp;|</a>
            <video webkit-playsinline playsinline src="http://h5.oeeee.com/h5/cppcc/video/chatvideo2.mp4"></video>
            <a href="javascript:void(0);" class="playbtn" v-on:click="playvideo"><img src="~assets/home/vimg002.jpg"/></a>
            <i class="handTips-red"></i>
          </div>
        </div>
      </div>

      <div v-show="showon >= 14" class="item chat" data-delay="1000">
        <img src="~assets/home/head_buyuqing.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者卜羽勤</div>
          <div class="cont">女神！</div>
        </div>
      </div>

      <div v-show="showon >= 15" class="item chat" data-delay="1000">
        <img src="~assets/home/head_chengshuwen.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者程姝雯</div>
          <div class="cont">女神！</div>
        </div>
      </div>

      <div v-show="showon >= 16" class="item chat" data-delay="1000">
        <img src="~assets/home/head_chengsiwei.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者程思炜</div>
          <div class="cont">女神！</div>
        </div>
      </div>

      <div v-show="showon >= 17" class="item chat" data-delay="1000">
        <img src="~assets/home/head_geqian.png" class="head"/>
        <div class="area">
          <div class="name">南都记者葛倩</div>
          <div class="cont">女神！</div>
        </div>
      </div>

      <div v-show="showon >= 18" class="item chat mychat" data-delay="1000">
        <img v-bind:src="user.head" class="head"/>
        <div class="area">
          <div class="name">{{ user.name }}</div>
          <div class="cont">求电话<img src="~assets/home/love.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 19" class="item chat" data-delay="2000">
        <img src="~assets/home/head_shangxi.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者商西</div>
          <div class="cont"><img src="~assets/home/cute.png"/>@南都记者程姝雯 @南都记者程思炜 你俩直播全国人代会新闻发布会&开幕也好棒哦~女主播风范<img src="~assets/home/laugh.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 20" class="item chat" data-delay="1500">
        <img src="~assets/home/head_chengshuwen.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者程姝雯</div>
          <div><img src="~assets/home/dabai.jpg"/></div>
        </div>
      </div>

      <div v-show="showon >= 21" class="item chat" data-delay="1500">
        <img src="~assets/home/head_chengsiwei.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者程思炜</div>
          <div><img src="~assets/home/beijing.jpg"/></div>
        </div>
      </div>

      <div v-show="showon >= 22" class="item chat" data-delay="2000">
        <img src="~assets/home/head_shangxi.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者商西</div>
          <div class="video">
            <!-- 小视频 -->
            <a href="javascript:void(0);" class="pausebtn" v-on:click="pausevideo">|&nbsp;|</a>
            <video webkit-playsinline playsinline src="http://h5.oeeee.com/h5/cppcc/video/chatvideo3.mp4"></video>
            <a href="javascript:void(0);" class="playbtn" v-on:click="playvideo"><img src="~assets/home/vimg003.jpg"/></a>
            <i class="handTips-red"></i>
          </div>
        </div>
      </div>

      <div v-show="showon >= 23" class="item chat" data-delay="1500">
        <img src="~assets/home/head_tangzizi.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者唐孜孜</div>
          <div><img src="~assets/home/bang1.jpg"/></div>
        </div>
      </div>

      <div v-show="showon >= 24" class="item chat" data-delay="1500">
        <img src="~assets/home/head_wangxiuzhong.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者王秀中</div>
          <div><img src="~assets/home/bang2.jpg"/></div>
        </div>
      </div>

      <div v-show="showon >= 25" class="item chat" data-delay="1500">
        <img src="~assets/home/head_panshanju.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者潘珊菊</div>
          <div><img src="~assets/home/bang3.jpg"/></div>
        </div>
      </div>

      <div v-show="showon >= 26" class="item chat" data-delay="2000">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="cont">各位老师棒棒哒~你们的爆款文我都统计出来了，采访到好多“大咖”，66666666666</div>
        </div>
      </div>

      <div v-show="showon >= 27" class="item chat" data-delay="2000">
        <img src="~assets/home/head_jianglin.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者蒋琳</div>
          <div class="cont">非常感谢@全国政协委员、中国驻日本大使程永华 老师接受南都的采访<img src="~assets/home/rose.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 28" class="item chat" data-delay="2000">
        <img src="~assets/home/head_chengyonghua.jpg" class="head"/>
        <div class="area">
          <div class="name">全国政协委员、中国驻日本大使程永华</div>
          <div class="video">
            <!-- 小视频 -->
            <a href="javascript:void(0);" class="pausebtn" v-on:click="pausevideo">|&nbsp;|</a>
            <video webkit-playsinline playsinline src="http://h5.oeeee.com/h5/cppcc/video/chatvideo4.mp4"></video>
            <a href="javascript:void(0);" class="playbtn" v-on:click="playvideo"><img src="~assets/home/vimg004.jpg"/></a>
            <i class="handTips-red"></i>
          </div>
        </div>
      </div>

      <div v-show="showon >= 29" class="item chat" data-delay="2000">
        <img src="~assets/home/head_jianglin.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者蒋琳</div>
          <div class="cont">非常感谢@全国政协委员、中国驻德国大使史明德 老师接受南都的采访<img src="~assets/home/rose.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 30" class="item chat" data-delay="2000">
        <img src="~assets/home/head_shimingde.jpg" class="head"/>
        <div class="area">
          <div class="name">全国政协委员、中国驻德国大使史明德</div>
          <div class="video">
            <!-- 小视频 -->
            <a href="javascript:void(0);" class="pausebtn" v-on:click="pausevideo">|&nbsp;|</a>
            <video webkit-playsinline playsinline src="http://h5.oeeee.com/h5/cppcc/video/chatvideo5.mp4"></video>
            <a href="javascript:void(0);" class="playbtn" v-on:click="playvideo"><img src="~assets/home/vimg005.jpg"/></a>
            <i class="handTips-red"></i>
          </div>
        </div>
      </div>

      <div v-show="showon >= 31" class="item chat" data-delay="2000">
        <img src="~assets/home/head_tangzizi.jpg" class="head"/>
        <div class="area">
          <div class="name">南都记者唐孜孜</div>
          <div class="cont">非常感谢@全国政协常委、副秘书长、民进中央副主席朱永新 老师接受南都的采访<img src="~assets/home/rose.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 32" class="item chat" data-delay="2000">
        <img src="~assets/home/head_zhuyongxin.jpg" class="head"/>
        <div class="area">
          <div class="name">全国政协常委、副秘书长、民进中央副主席朱永新</div>
          <div class="video">
            <!-- 小视频 -->
            <a href="javascript:void(0);" class="pausebtn" v-on:click="pausevideo">|&nbsp;|</a>
            <video webkit-playsinline playsinline src="http://h5.oeeee.com/h5/cppcc/video/chatvideo6.mp4"></video>
            <a href="javascript:void(0);" class="playbtn" v-on:click="playvideo"><img src="~assets/home/vimg006.jpg"/></a>
            <i class="handTips-red"></i>
          </div>
        </div>
      </div>

      <div v-show="showon >= 33" class="item chat mychat" data-delay="2000">
        <img v-bind:src="user.head" class="head"/>
        <div class="area">
          <div class="name">{{ user.name }}</div>
          <div class="cont">niubility<img src="~assets/home/jizhi.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 34" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030629267.html" v-on:click="showframe">
              <div class="title">高端访谈|全国人大代表、河北省委书记赵克志：治霾要铁腕…</div>
              <img src="~assets/home/zhaokezhi.png" class="imgurl">
              <div class="desc">作为京津冀一体化战略的重要一环，河北省如何调整产业结构推动经济发展？</div>
            </a>
            <i class="handTips-red"></i>
          </div>
        </div>
      </div>

      <div v-show="showon >= 35" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030729420.html" v-on:click="showframe">
              <div class="title">南都高端访谈|广东省政协主席王荣：政协委员要练就寻找最…</div>
              <img src="~assets/home/wangrong.png" class="imgurl">
              <div class="desc">我为什么用PPT解说广东省政协工作报告</div>
            </a>
          </div>
        </div>
      </div>

      <div v-show="showon >= 36" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030228786.html" v-on:click="showframe">
              <div class="title">南都高端访谈|全国政协新闻发言人王国庆：我不是所有都知…</div>
              <img src="~assets/home/wangguoqing.png" class="imgurl">
              <div class="desc">要能容错纠错，让发言人愿说话敢说话</div>
            </a>
          </div>
        </div>
      </div>

      <div v-show="showon >= 37" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030629237.html" v-on:click="showframe">
              <div class="title">南都高端访谈|全国政协委员、中国（海南）改革发展研究院…</div>
              <img src="~assets/home/chifulin.png" class="imgurl">
              <div class="desc">迟福林：中国走到了税收结构调整的关键点</div>
            </a>
          </div>
        </div>
      </div>

      <div v-show="showon >= 38" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030328985.html" v-on:click="showframe">
              <div class="title">南都高端访谈|全国政协委员、财政部财政科学研究所原所长…</div>
              <img src="~assets/home/jiakang.png" class="imgurl">
              <div class="desc">建议个税征收应考虑家庭赡养负担</div>
            </a>
          </div>
        </div>
      </div>

      <div v-show="showon >= 39" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030729269.html" v-on:click="showframe">
              <div class="title">南都高端访谈|海峡两岸关系协会会长陈德铭：说我是学者型…</div>
              <img src="~assets/home/chendeming.png" class="imgurl">
              <div class="desc">去过100多个国家和地区，唯独到台湾像是到了家</div>
            </a>
          </div>
        </div>
      </div>

      <div v-show="showon >= 40" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030328949.html" v-on:click="showframe">
              <div class="title">南都高端访谈|国务院扶贫开发领导小组专家咨询委员会主任…</div>
              <img src="~assets/home/fanxiaojian.png" class="imgurl">
              <div class="desc">扶贫资金县级统筹管理要跟上</div>
            </a>
          </div>
        </div>
      </div>

      <div v-show="showon >= 41" class="item chat" data-delay="1500">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="link">
            <a href="javascript:void(0);" data-url="http://m.mp.oeeee.com/a/BAAFRD00002017030929716.html" v-on:click="showframe">
              <div class="title">南都高端访谈|全国政协委员阚珂：不同意一些人说《慈善…</div>
              <img src="~assets/home/dongdasheng.jpg" class="imgurl">
              <div class="desc">我认为这是一部比较完善的法律</div>
            </a>
          </div>
        </div>
      </div>

      <div v-show="showon >= 42" class="item chat" data-delay="2000">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="cont">@{{ user.name }} 南都关于全国两会的报道，1-10分，你觉得多少分呢？</div>
        </div>
      </div>

      <div v-show="showon >= 43" class="item chat mychat" data-delay="1000">
        <img v-bind:src="user.head" class="head"/>
        <div class="area">
          <div class="name">{{ user.name }}</div>
          <div class="cont">{{ fen }}</div>
        </div>
      </div>

      <div v-show="showon >= 44" class="item chat" data-delay="2000">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="cont">谢谢，我们会继续努力哒，么么哒<img src="~assets/home/lips.png"/></div>
        </div>
      </div>

      <div v-show="showon >= 45" class="item chat" data-delay="">
        <img src="~assets/home/head_xiaonan.jpg" class="head"/>
        <div class="area">
          <div class="name">南都机器人小南</div>
          <div class="redpack">
            <a href="#/foo"><img src="~assets/home/redpack.png"/></a>
          </div>
        </div>
      </div>
          </div>
    <div class="bottom"></div>

    <div class="setfun">
      <div>请您打分</div>
      <div>
        <a href="javascript:void(0);" @click="setfen">1分</a>
        <a href="javascript:void(0);" @click="setfen">2分</a>
        <a href="javascript:void(0);" @click="setfen">3分</a>
        <a href="javascript:void(0);" @click="setfen">4分</a>
        <a href="javascript:void(0);" @click="setfen">5分</a>
        <a href="javascript:void(0);" @click="setfen">6分</a>
        <a href="javascript:void(0);" @click="setfen">7分</a>
        <a href="javascript:void(0);" @click="setfen">8分</a>
        <a href="javascript:void(0);" @click="setfen">9分</a>
        <a href="javascript:void(0);" @click="setfen">10分</a>
      </div>
    </div>

    <div id="urlframe" v-if="sframe.on">
      <a href="javascript:void(0);" v-on:click="closeframe" class="closeframe"></a>
      <div class="frames">
        <iframe v-bind:src="sframe.url" scrolling="auto"></iframe>
      </div>
    </div>

    <div v-if="load.loadok" class="loading">
      <div class="begin">
        <img src="~assets/loadingbg.gif"/>
        <div class="img">
          <img v-bind:src="user.head"/>
          <div>正在拉你进群，请稍后</div>
          <div>{{load.loadtxt}}%</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  var timeout,nextnum;
  export default {
    name: 'chatgroup',
    data () {
      return {
        times : '',
        user: $user,
        showon : '',
        fen: '',
        sframe : {
          on : false,
          url : ''
        },
        load: {
          loadtxt: '0',
          loadok: true
        }
      }
    },
    mounted() {
      this.loading();
      this.getdate();
    },
    methods: {
      loading(){
        var _this = this;
        var i = 0;
        var lo = setInterval(function(){
          if(i<=100){
            _this.load.loadtxt = i++;
          }else{
            clearInterval(lo);
            setTimeout(function(){
              _this.load.loadok = false;
              _this.addmsg(0);
            },800)
          }
        },30);
      },
      getdate(){
        var date = new Date(),
            day = date.getDate(), //当前日子
            month = date.getMonth(),  //当前月份
            h = date.getHours(),  //当前时间
            m = date.getMinutes();  //当前分钟
        if(h<10){
          h="0"+h;
        }
        if(m<10){
          m="0"+m;
        }
        this.times = month+1+"月"+day+"日 "+h+':'+m;  //设置时间
      },
      addmsg(i){
        var _this = this; //_this为vue本身
        var length = $('.item').length-1;   //对话的总数

        if(i<=length){
          var obj = $('.item').eq(i), //当前元素
              height = obj.height();  //当前元素高度

          var top = $('.chatgroup_area').height() + height;   //设置滚动条位置

          _this.showon = i;

          if(i>1){
            playmusic();
          }

          $('body,html').animate({
            scrollTop : top
          },300);

          var delay = obj.data('delay');   //获取当前停留时间
          if(!delay){
            delay = '1200';   //默认停留时间
          }

//          console.log('i'+i);
          if(i == 42){    //需要打分
            setTimeout(function(){
              $('.setfun').animate({    //弹出分数选项
                bottom : 0
              },300);
            },2500);
            i++;
            nextnum = i;
          }else{
            i++;
            nextnum = i;
            timeout = setTimeout(function(){  //显示下一个对话
              _this.addmsg(nextnum);
            },delay);
          }
//          console.log('next'+nextnum);
        }
      },
      playvideo: function(e){
        var _this = this;
        _this.pausemsg();
        var $target;
//        console.log(e.target.tagName);
        if(e.target.tagName == 'IMG'){
          $target = $(e.target).parent();
        }
        $target.css('opacity',0);

        var ua = navigator.userAgent.toLowerCase();
        if (/android/.test(ua)) {
          $target.parent().find('.pausebtn').show();
        }

        var $video = $target.prev()[0];

        if($video.paused) {  //暂停状态
          $video.play();
        }else if(!$video.paused){
          $video.pause();
          _this.goonmsg();
        }

        $video.addEventListener('ended',function(){
          _this.goonmsg();
          return;
        });
      },
      pausevideo: function(e){
        var $video = $(e.target).next()[0];
        $video.pause();
        this.goonmsg();
      },
      setfen: function(e){
        var _this = this;
        _this.fen = $(e.target).text();
        $('.setfun').animate({
          bottom : '-50%'
        },300,function(){
          _this.goonmsg();
        });
      },
      showframe: function(e){
        var _this = this;
        var urls;
        if(e.target.tagName == 'A'){
          urls = $(e.target).data('url');
        }else{
          urls = $(e.target).parent().data('url');
        }
        _this.pausemsg();
        _this.sframe.on = true;
        _this.sframe.url = urls;
      },
      closeframe: function(e){
        var _this = this;
        _this.sframe.on = false;
        _this.sframe.url = '';
        if(nextnum>42 && _this.fen!=""){
          _this.goonmsg();
        }else if(nextnum<42){
          _this.goonmsg();
        }
      },
      pausemsg(){
        clearTimeout(timeout);  //暂停下个对话
      },
      goonmsg(){
//        console.log(nextnum);
        var _this = this;
        $('.pausebtn').hide();
        timeout = setTimeout(function(){
          _this.addmsg(nextnum);    //显示下一个对话
        },1000);
      }
    }
  }

  function playmusic(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == "micromessenger") {
      WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
        document.getElementById('msgmusic').load();
        document.getElementById('msgmusic').play();
      });
    } else {
      document.getElementById('msgmusic').load();
      document.getElementById('msgmusic').play();
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less" scoped>
  @import "~assets/css/less.less";

  .chatgroup{background:#ebebeb; min-height:100%; overflow:hidden;
    .chatgroup_area{
      margin:0 20/@rem 100/@rem; overflow:hidden;
    }
  }
  .time{font-size:26/@rem;  color:#fff; text-align:center; margin:36/@rem auto 27/@rem;
    span{display:inline-block; border-radius:8.5/@rem; background:#ccc; width:auto; padding:0 15/@rem; line-height:50/@rem; }
  }
  .tips{font-size:26/@rem; border-radius:8.5/@rem; color:#fff; background:#ccc; line-height:36/@rem; margin:0 20/@rem 50/@rem; padding:25/@rem; text-align: justify;}
  .chat{font-size:24/@rem; clear:both; overflow:hidden; display:block; padding-bottom:30/@rem;
    .head{float:left; width:80/@rem; height:80/@rem;}
    .name{margin-bottom: 8/@rem;;}
    .area{float:left; color:#737373; margin-left:20/@rem; line-height:30/@rem;
      img{width:350/@rem;}
      .link,.cont{max-width:440/@rem; min-width:110/@rem; background:#fff; border:1px #cdcdcd solid; padding:18/@rem; border-radius:8.5/@rem; font-size:32/@rem; color:#000; line-height:40/@rem; min-height:40/@rem; display:inline-block; position:relative; text-align: justify;
        &:before,&:after{content:""; position:absolute; z-index:2; left:-24/@rem; top:20/@rem; width: 0; height: 0; border: 12/@rem solid transparent; border-right:15/@rem solid #fff;}
        &:after{border-right-color:#cdcdcd; z-index:1; left:-28/@rem;}
        img{width:36/@rem; vertical-align:bottom; margin:0 5px;}
      }
      .link{max-width:460/@rem;
        a{display:block; overflow: hidden;}
        .title{color:#000; font-size:32/@rem; line-height:40/@rem; height:80/@rem; overflow:hidden; margin-bottom: 10/@rem;}
        .desc{margin-right:100/@rem; color:#969696; font-size:24/@rem;}
        .imgurl{float:right; width:90/@rem; height:90/@rem;}
      }
      .redpack{
        a{display:block;
        img{width:475/@rem; margin-left:-10/@rem;}
        }
      }
      .video{position: relative; display:inline-block;
        .playbtn{position:absolute; z-index:50; width:100%; height:100%; top:0; display: block; overflow:hidden; background:rgba(0,0,0,0);
          img{width:100%;}
        }
        .pausebtn{display:none; position:absolute; width:100/@rem; height:100/@rem; border-radius:100%; right:-110/@rem; background: #bbb; top:30%; color:#fff; text-align:center; line-height:100/@rem; font-size:30/@rem; font-weight:bold;}
        video{max-width: 440/@rem; height:auto;}
      }
    }
    &.mychat{
      .head{float:right;}
      .name{text-align:right;}
      .area{float:right; margin-right:20/@rem;
        .cont{background:#a0e75a; border-color:#6fb44d;
          &:before,&:after{content:""; left:auto; right:-13/@rem; border-right:none; border-left:15/@rem solid #a0e75a;}
          &:after{border-left-color:#6fb44d; left:auto; right:-17/@rem;}
        }
      }
    }
  }
  .bottom{position:fixed; z-index:60; bottom:0; left:0; width:100%; height:100/@rem; background: url("~assets/home/bottom.png") 50% 50%/contain no-repeat;}
  .setfun{position:fixed; z-index:70; width:100%; bottom:-50%;
    div{text-align:center; font-size:24/@rem; color:#fff; background:#a8b0bc;}
    a{float:left; width:19.75%; border-right:1px #a8b1bd solid; font-size:44/@rem; height:110/@rem; background:#fff; border-top:1px #a8b1bd solid; line-height:110/@rem; color:#000;
      &:nth-child(5n){border-right:0;}
    }
  }
  #urlframe{
    .closeframe{position:fixed; width:131/@rem; height:131/@rem;overflow: auto; background:url("~assets/closeframe.png") 0 0/contain no-repeat; z-index:100; top:0; left:50%; margin-left:-65.5/@rem;}
    .frames{
      position: fixed; right: 0; bottom: 0; left: 0; top: 0;
      height:100%; width:100%; top:5%; border:15/@rem solid #000; background:#fff; box-sizing: border-box;
      -webkit-overflow-scrolling: touch; overflow-y: scroll; z-index:99;
      iframe{
        width: 100%; height: 95%; border:none;
      }
    }
  }
  /*http://h5.oeeee.com/h5/cppcc/gif/loadingbg.png*/
  .loading{position: absolute; z-index: 99; top:0;
    img{width:100%;}
    .img{position:absolute; top:37%; left:50%; margin-left:-50%; width:100%; color:#faf00a; text-align:center; font-size:24/@rem;
      img{margin:0 auto 30/@rem; overflow:hidden; width:150/@rem; height:150/@rem; border-radius:100%; border:25/@rem solid #faf00a;}
    }
  }
</style>
